<template>
    <div class="user-management">
        <a-card :bordered="false" :bodyStyle="{padding: 0}">
            <!-- 操作按钮区域 -->
            <div class="ant-pro-table-toolbar">
                <div class="ant-pro-table-toolbar-title">设备类型管理</div>
                <div class="ant-pro-table-toolbar-option">
                <a-button v-has="'sys:organization:add'" type="primary" icon="plus" @click="handleAdd()">新建</a-button>
                </div>
            </div>

            <!--数据表格区域-->
            <div class="ant-pro-table-wrapper">
                <a-table
                    ref="table"
                    size="middle"
                    :rowKey="rowKey"
                    :columns="columns"
                    :dataSource="dataSource"
                    :loading="loading"
                    :pagination="pagination"
                    @change="handleTableChange"
                >
                <template slot="expandIcon">
                    <a-icon type="caret-down"/>
                </template>

                <template slot="action-slot" slot-scope="text, record">
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm 
                                title="确认要删除吗？"
                                @confirm="() => deleteObj(record)">
                    <a href="javascript:">删除</a>
                    </a-popconfirm>
                </template>
                </a-table>
            </div>
        </a-card>

        <!--表单页面-->
        <div v-if="visible">
            <a-modal
                :title="addFlag ? '新增' : '修改'"
                :visible="visible"
                @ok="handleSubmit"
                @cancel="handleClose"
                :confirmLoading="submitLoading"
                :maskClosable="false"
                :bodyStyle="{ padding: '12px 18px' }"
                :centered="true"
            >
                <a-form-model
                    @submit="handleSubmit"
                    :rules="rules"
                    :model="form"
                    ref="ruleForm"
                >
                    <a-form-model-item style="display: none">
                        <a-input v-model="form.id" />
                    </a-form-model-item>
                    <a-form-model-item label="类型名称" prop="classifyName">
                        <a-input placeholder="请输入" v-model="form.classifyName" />
                    </a-form-model-item>
                    <a-form-model-item label="类型编码" >
                        <a-input placeholder="请输入" v-model="form.classifyCode" :disabled="!addFlag"/>
                    </a-form-model-item>
                    <a-form-model-item label="关联告警类型">
                        <a-select v-model="form.typeIds" mode="multiple" @change="handleChange">
                            <a-select-option v-for="item in warningCodeList" :key="String(item.id)" >
                                {{item.warningName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="备注">
                        <a-textarea placeholder="请输入" v-model="form.remark" />
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>    
</template>

<script>
import formMinxins from "./formMinxins";
export default {
    name:'typeManagement',
    mixins: [formMinxins],
    data(){
        return{
            columns:[
                {
                    title: "序号",
                    dataIndex: "index",
                    align: "center",
                },
                {
                    title: "类型名称",
                    dataIndex: "classifyName",
                    align: "center",
                },
                {
                    title: "类型编码",
                    dataIndex: "classifyCode",
                    align: "center",
                },
                {
                    title: "备注",
                    dataIndex: "remark",
                    align: "center",
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    width: '150px',
                    scopedSlots: { customRender: 'action-slot' }
                }
            ],
            // dataSource:[],
            submitLoading: false,
            form: {
                id:"",
                remark:"",
                classifyCode:"",
                classifyName:"",
                typeIds:[]
            },
            rules:{
                classifyName:[{required: true, message: '请输入类型名称', trigger: 'blur'}],
                classifyCode:[{required: true, message: '请输入类型编码', trigger: 'blur'}]
            },
            addFlag:true,
            visible:false,
            warningCodeList:[],
        }

    },
    created(){
        this.getDataUrl = "/rapid/equipmentClassify/getPage";
        this.searchKey = "equipmentClassify";
        this.loadData();
        this.getPcode();
    },
    methods:{
        //编辑
        handleEdit(record){
            this.visible = true;
            this.addFlag = false;
            const equipmentClassify = {
                ...record
            }
            this.$http('/rapid/equipmentClassify/getClassify',equipmentClassify).then(res =>{
                if(res.code === 200){
                    this.form = res.result;
                    if(!res.result.typeIds){
                        this.form.typeIds=[]
                    }else{
                        this.form.typeIds=res.result.typeIds.split(",");
                        console.log(this.form.typeIds, 'ttt')
                    }
                }
            })
        },
        //新增
        handleAdd () {
            this.visible = true;
            this.addFlag = true;
        },
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) =>{
                if(valid){
                    this.form.typeIds = this.form.typeIds.join(',')
                    this.$http('/rapid/equipmentClassify/saveOrUpdate',this.form).then(res =>{
                        if(res.code === 200){
                            this.$message.success('更新完成！');
                            this.loadData();
                            this.handleClose();
                        }
                    })
                }else{
                    this.$message.error("请填写必填项")
                    return false;
                }
            })
        },
        handleClose(){
            this.visible = false;
            this.form = {};
            this.loadData();
        },
        getPcode(){
            const data ={
                warnType:{}
            }
            this.$http('/rapid/warningType/getWarningTypeList',data).then(res =>{
                if(res.code === 200){
                    this.warningCodeList = res.result;
                }
            })
        },
        handleChange(value) {
            console.log(`selected ${value}`);
        },
        deleteObj(record){
            this.$http('/rapid/equipmentClassify/delete',record).then(res =>{
                if(res.code === 200){
                    this.$message.success("删除成功");
                    this.handleClose();
                }
            })
        }
        
    }
}
</script>


<style scoped lang="less">
.user-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}

.expandIcon {
  margin-right: 8px
}

.leafNode {
  padding-left: 14px;
}
</style>